<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>学成在线</title>
  <link rel="stylesheet" href="style.css">
  <style>

  </style>
</head>

<body>
  <!-- 头部 -->
  <div class="header w">
    <div class="h-float logo">
      <h1><a href="#" title="学成在线">学成在线</a></h1>
    </div>
    <div class="h-float nav">
      <li>首页</li>
      <li>课程</li>
      <li>职业规划</li>
    </div>
    <div class="h-float search">
      <input type="text" />
      <span></span>
    </div>
    <div class="h-float user-info">
      <span class="user-avatar"><img src="images/avator.png" alt=""></span>
      <span class="user-name">aa-lseisss </span>
    </div>
  </div>
  <!-- 滚动banner -->
  <div class="banner">
    <div class="banner-container w">
      <div class="course-list">
        <ul class="">
          <li>前端开发</li>
          <li>后端开发</li>
          <li>移动开发</li>
          <li>人工智能</li>
          <li>商业预测</li>
          <li>云计算&大数据</li>
          <li>运维&从测试</li>
          <li>U设计</li>
          <li>产品</li>
        </ul>
      </div>
      <div class="my-course">
        <div class="my-course-title">我的课程表</div>
        <ul>
          <li>
            <p>继续学习程序语言设计</p>
            <p>正在学习-使用对象</p>
          </li>
          <li>
            <p>继续学习程序语言设计</p>
            <p>正在学习-使用对象</p>
          </li>
          <li>
            <p>继续学习程序语言设计</p>
            <p>正在学习-使用对象</p>
          </li>
          <div class="my-coulse-footer">全部课程</div>
        </ul>
      </div>
    </div>
  </div>
  <!-- 个人兴趣 -->
  <div class="w suggest ">
    <div class="suggest-list">
      <ul>
        <li>精品推荐</li><span>|</span>
        <li>JQuery</li><span>|</span>
        <li>Spark</li><span>|</span>
        <li>MySQL</li><span>|</span>
        <li>JavaWeb</li><span>|</span>
        <li>MySQL</li><span>|</span>
        <li>JavaWeb</li>
      </ul>
    </div>
    <div class="hobby-eidt">修改兴趣</div>
  </div>
  <!-- 课程主体 -->
  <div class="w">
    <div class="recommend">
      <div class="clearFix">
        <div class="recommend-title">精品推荐</div>
        <div class="recommend-all"><a href="#">查看全部</a></div>
      </div>
      <div class="recommend-body clearFix">
        <div class="recommend-card">
          <div class="recommend-image">
            <img class="recomend-label" src="images/new.png" alt="">
            <img src="./images/recommend_card1.png" alt="" />
          </div>
          <div class="recommend-card-message">
            <h4>Think PHP5.0博客系统实战项目演练</h4>
            <p><span>高级</span>·1125人在学习</p>
          </div>
        </div>
        <div class="recommend-card">
          <div class="recommend-image">
            <img src="./images/recommend_card2.png" alt="" />
          </div>
          <div class="recommend-card-message">
            <h4>Think PHP5.0博客系统实战项目演练</h4>
            <p><span>高级</span>·1125人在学习</p>
          </div>
        </div>
        <div class="recommend-card">
          <div class="recommend-image">
            <img src="./images/card_08.png" alt="" />
          </div>
          <div class="recommend-card-message">
            <h4>Think PHP5.0博客系统实战项目演练</h4>
            <p><span>高级</span>·1125人在学习</p>
          </div>
        </div>
        <div class="recommend-card">
          <div class="recommend-image">
            <img src="./images/card_05.png" alt="" />
          </div>
          <div class="recommend-card-message">
            <h4>Think PHP5.0博客系统实战项目演练</h4>
            <p><span>高级</span>·1125人在学习</p>
          </div>
        </div>
        <div class="recommend-card">
          <div class="recommend-image">
            <img src="./images/recommend_card1.png" alt="" />
          </div>
          <div class="recommend-card-message">
            <h4>Think PHP5.0博客系统实战项目演练</h4>
            <p><span>高级</span>·1125人在学习</p>
          </div>
        </div>
        <div class="recommend-card">
          <div class="recommend-image">
            <img src="./images/card_10.png" alt="" />
          </div>
          <div class="recommend-card-message">
            <h4>Think PHP5.0博客系统实战项目演练</h4>
            <p><span>高级</span>·1125人在学习</p>
          </div>
        </div>
        <div class="recommend-card">
          <div class="recommend-image">
            <img src="./images/card_03.png" alt="" />
          </div>
          <div class="recommend-card-message">
            <h4>Think PHP5.0博客系统实战项目演练</h4>
            <p><span>高级</span>·1125人在学习</p>
          </div>
        </div>
        <div class="recommend-card">
          <div class="recommend-image">
            <img src="./images/recommend_card2.png" alt="" />
          </div>
          <div class="recommend-card-message">
            <h4>Think PHP5.0博客系统实战项目演练</h4>
            <p><span>高级</span>·1125人在学习</p>
          </div>
        </div>
        <div class="recommend-card">
          <div class="recommend-image">
            <img src="./images/recommend_card1.png" alt="" />
          </div>
          <div class="recommend-card-message">
            <h4>Think PHP5.0博客系统实战项目演练</h4>
            <p><span>高级</span>·1125人在学习</p>
          </div>
        </div>
        <div class="recommend-card">
          <div class="recommend-image">
            <img src="./images/card__37.png" alt="" />
          </div>
          <div class="recommend-card-message">
            <h4>Think PHP5.0博客系统实战项目演练</h4>
            <p><span>高级</span>·1125人在学习</p>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="cousre1 w clearFix">
    <div class="couser1-title clearFix">
      <div class="recommend-title couser-text">编程入门</div>
      <div class="couser1-list">
        <ul>
          <li>热门</li>
          <li>初级</li>
          <li>中级</li>
          <li>高级</li>
        </ul>
      </div>
      <div class="recommend-all"><a href="#">查看全部</a></div>
    </div>
    <div class="courser-container">
      <div class="cousr1-introduction">
        <img src="images/introduction2.png" alt="">
      </div>
      <div class="cousr1-body">
        <div class="cousr1-introduction-header">
          <img src="images/introduction-header2.png" alt="">
        </div>
        <div class="cousr1-introduction-body">
          <ul>
            <li class="recommend-card">
              <div class="recommend-image">
                <img src="./images/card_03.png" alt="" />
              </div>
              <div class="recommend-card-message">
                <h4>Think PHP5.0博客系统实战项目演练</h4>
                <p><span>高级</span>·1125人在学习</p>
              </div>
            </li>
            <li class="recommend-card">
              <div class="recommend-image">
                <img src="./images/recommend_card1.png" alt="" />
              </div>
              <div class="recommend-card-message">
                <h4>Think PHP5.0博客系统实战项目演练</h4>
                <p><span>高级</span>·1125人在学习</p>
              </div>
            </li>
            <li class="recommend-card">
              <div class="recommend-image">
                <img src="./images/card_08.png" alt="" />
              </div>
              <div class="recommend-card-message">
                <h4>Think PHP5.0博客系统实战项目演练</h4>
                <p><span>高级</span>·1125人在学习</p>
              </div>
            </li>
            <li class="recommend-card">
              <div class="recommend-image">
                <img src="./images/card__37.png" alt="" />
              </div>
              <div class="recommend-card-message">
                <h4>Think PHP5.0博客系统实战项目演练</h4>
                <p><span>高级</span>·1125人在学习</p>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
  <div class="cousre1 w">
    <div class="couser1-title clearFix">
      <div class="recommend-title couser-text">数据分析师</div>
      <div class="couser1-list">
        <ul>
          <li>热门</li>
          <li>初级</li>
          <li>中级</li>
          <li>高级</li>
        </ul>
      </div>
      <div class="recommend-all"><a href="#">查看全部</a></div>
    </div>
    <div class="courser-container">
      <div class="cousr1-introduction">
        <img src="images/introduction1.png" alt="">
      </div>
      <div class="cousr1-body">
        <div class="cousr1-introduction-header">
          <img src="images/introduction-header1.png" alt="">
        </div>
        <div class="cousr1-introduction-body">
          <ul>
            <li class="recommend-card">
              <div class="recommend-image">
                <img src="./images/recommend_card1.png" alt="" />
              </div>
              <div class="recommend-card-message">
                <h4>Think PHP5.0博客系统实战项目演练</h4>
                <p><span>高级</span>·1125人在学习</p>
              </div>
            </li>
            <li class="recommend-card">
              <div class="recommend-image">
                <img src="./images/recommend_card1.png" alt="" />
              </div>
              <div class="recommend-card-message">
                <h4>Think PHP5.0博客系统实战项目演练</h4>
                <p><span>高级</span>·1125人在学习</p>
              </div>
            </li>
            <li class="recommend-card">
              <div class="recommend-image">
                <img src="./images/recommend_card1.png" alt="" />
              </div>
              <div class="recommend-card-message">
                <h4>Think PHP5.0博客系统实战项目演练</h4>
                <p><span>高级</span>·1125人在学习</p>
              </div>
            </li>
            <li class="recommend-card">
              <div class="recommend-image">
                <img src="./images/recommend_card1.png" alt="" />
              </div>
              <div class="recommend-card-message">
                <h4>Think PHP5.0博客系统实战项目演练</h4>
                <p><span>高级</span>·1125人在学习</p>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
  <div class="w">
    <div class="recommend">
      <div class="clearFix">
        <div class="recommend-title">精品推荐</div>
        <div class="recommend-all"><a href="#">查看全部</a></div>
      </div>
      <div class="recommend-body clearFix">
        <div class="recommend-card">
          <div class="recommend-image">
            <img src="./images/card_08.png" alt="" />
          </div>
          <div class="recommend-card-message">
            <h4>Think PHP5.0博客系统实战项目演练</h4>
            <p><span>高级</span>·1125人在学习</p>
          </div>
        </div>
        <div class="recommend-card">
          <div class="recommend-image">
            <img src="./images/recommend_card1.png" alt="" />
          </div>
          <div class="recommend-card-message">
            <h4>Think PHP5.0博客系统实战项目演练</h4>
            <p><span>高级</span>·1125人在学习</p>
          </div>
        </div>
        <div class="recommend-card">
          <div class="recommend-image">
            <img src="./images/card_10.png" alt="" />
          </div>
          <div class="recommend-card-message">
            <h4>Think PHP5.0博客系统实战项目演练</h4>
            <p><span>高级</span>·1125人在学习</p>
          </div>
        </div>
        <div class="recommend-card">
          <div class="recommend-image">
            <img src="./images/recommend_card1.png" alt="" />
          </div>
          <div class="recommend-card-message">
            <h4>Think PHP5.0博客系统实战项目演练</h4>
            <p><span>高级</span>·1125人在学习</p>
          </div>
        </div>
        <div class="recommend-card">
          <div class="recommend-image">
            <img src="./images/card__15.png" alt="" />
          </div>
          <div class="recommend-card-message">
            <h4>Think PHP5.0博客系统实战项目演练</h4>
            <p><span>高级</span>·1125人在学习</p>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="w">
    <div class="recommend">
      <div class="clearFix">
        <div class="recommend-title">精品推荐</div>
        <div class="recommend-all"><a href="#">查看全部</a></div>
      </div>
      <div class="recommend-body clearFix">
        <div class="recommend-card">
          <div class="recommend-image">
            <img src="./images/recommend_card1.png" alt="" />
          </div>
          <div class="recommend-card-message">
            <h4>Think PHP5.0博客系统实战项目演练</h4>
            <p><span>高级</span>·1125人在学习</p>
          </div>
        </div>
        <div class="recommend-card">
          <div class="recommend-image">
            <img src="./images/card_05.png" alt="" />
          </div>
          <div class="recommend-card-message">
            <h4>Think PHP5.0博客系统实战项目演练</h4>
            <p><span>高级</span>·1125人在学习</p>
          </div>
        </div>
        <div class="recommend-card">
          <div class="recommend-image">
            <img src="./images/recommend_card1.png" alt="" />
          </div>
          <div class="recommend-card-message">
            <h4>Think PHP5.0博客系统实战项目演练</h4>
            <p><span>高级</span>·1125人在学习</p>
          </div>
        </div>
        <div class="recommend-card">
          <div class="recommend-image">
            <img src="./images/card_10.png" alt="" />
          </div>
          <div class="recommend-card-message">
            <h4>Think PHP5.0博客系统实战项目演练</h4>
            <p><span>高级</span>·1125人在学习</p>
          </div>
        </div>
        <div class="recommend-card">
          <div class="recommend-image">
            <img src="./images/card__37.png" alt="" />
          </div>
          <div class="recommend-card-message">
            <h4>Think PHP5.0博客系统实战项目演练</h4>
            <p><span>高级</span>·1125人在学习</p>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="footer">
    <div class="w">
      <div class="footer-left">
        <div class="footer-logo"><img src="./images/logo.png" alt=""></div>
        <div class="copyright">
          学成在线致力于普及中国最好的教育它与中国一流大学和机构合作提供在线课程。
          °2017年XTCG Ine.保留所有权利。-沪CP备15025210号
        </div>
        <button>下载APP</button>
      </div>
      <dl>
        <dt>关于学成网</dt>
        <dd><a href="#">关于</a></dd>
        <dd><a href="#">管理团队</a></dd>
        <dd><a href="#">工作机会</a></dd>
        <dd><a href="#">客服服务</a></dd>
        <dd><a href="#">帮助</a></dd>
      </dl>
      <dl>
        <dt>新手指南</dt>
        <dd><a href="#">如何选课</a></dd>
        <dd><a href="#">如何拿到毕业证</a></dd>
        <dd><a href="#">学分是什么</a></dd>
        <dd><a href="#">考试未通过怎么办</a></dd>
      </dl>
      <dl>
        <dt>合作伙伴</dt>
        <dd><a href="#">合作机构</a></dd>
        <dd><a href="#">合作导师</a></dd>
      </dl>
    </div>
  </div>
</body>

</html>